<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<p>{{msg}}</p>
		<input type="text" v-model="msg">
		<button @click="destroy">销毁</button>
	</div>
	<script src="vue.js"></script>
	<script>
		/*
		生命周期钩子：vue实力从创建、运行、到销毁伴随着一些事件，这些事件叫 生命周期钩子、生命周期函数
		    8个生命周期钩子  
			1、beforeCreate(){} 在实力创建再去运行, el：还没有挂着到Dom，实力上的还没有初始化
			  $el:实力上的属性，挂着的元素
			  $data:实力上的属性，数据属性
			  $mount():实力上方法，把实力挂载到DOM上

			2、created:实力创建完成，数据和方法已经被初始化，vue实力还没挂着载到元素上（$el)

			3、beforeMount:实力挂载到Dom之前执行到函数，此时的Dom是虚拟的还不能使用

			4、Mounted:实力挂载dom完成，dom已经渲染完成，可以对dom进行操作

			5、beforeUpdate:数据更新前执行的函数

			6、updated:数据更新完成执行的函数，更新数据时候执行

			7、beforeDestroy:实力销毁前执行的钩子

			8、destroyed:销毁成功以后执行的钩子
		*/
		var vm = new Vue({
			el:"#app",
			data:{
				msg:'hello'
			},
			methods:{
				//销毁实力：$destroy
				destroy(){
				this.$destroy();
				}
			
			},
		/*
		 %c是针对字符  %s是针对字符串
		*/
			beforeCreate(){
					console.group("-----beforeCreate-----")
					console.log("%c%s","color:red",this.$el)//undefined
					console.log("%c%s","color:red",this.msg)//undefined
			},
			created(){
				console.group("-----created-----")
				console.log("%c%s","color:red",this.$el)//undefined
				console.log("%c%s","color:red",this.msg)//hello
				
		    },
			beforeMount(){
				console.group("-----beforeMount-----")
				console.log("%c%s","color:red",this.$el)//div#app
				console.log("%c%s","color:red",this.msg)//hello
				console.log("%c%s","color:red",this.$mount)
			},
			mounted(){
				//常用 做ajax请求
				console.group("-----mounted-----")
				console.log("%c%s","color:red",this.$el)//div#app
				console.log("%c%s","color:red",this.msg)//hello
			},
			beforeUpdate(){
				console.group("----beforeUpdate------")
				console.log("%c%s","color:red",this.$el)//div#app
				console.log("%c%s","color:red",this.msg)//hello
			},
			updated(){
				console.group("-----updated-----")
				console.log("%c%s","color:red",this.$el)//div#app
				console.log("%c%s","color:red",this.msg)//hello
			},
			beforeDestroy(){
				/*
				 比如：清空定时器
				*/
				console.group("-----beforeDestroy-----")
				console.log("%c%s","color:red",this.$el)//div#app
				console.log("%c%s","color:red",this.msg)//hello
			},
			
			destroyed(){
				console.group("-----destroyed-----")
				console.log("%c%s","color:red",this.$el)//div#app
				console.log("%c%s","color:red",this.msg)//hello
			}
		})
		
	</script>
</body>
</html>